<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todos List</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var app4 = new Vue({
                el: '#app-4',
                methods: {
                    addthing: function () {
                        this.todos.push({name: this.username})
                    },
                    switchdel:function(index){
                        this.todos[index].done=!this.todos[index].done;
                    }
                } ,
                data: {
                    username:"",
                    todos: [
                        { name: '学习 JS',done:false },
                        { name: '学习 Vue',done:false },
                        { name: '整个牛项目',done:true}
                    ]
                }
            });
        }
    </script>
    <style>.del{text-decoration:line-through }</style>
</head>
<body>
<h1>Todos List</h1>
<div id="app-4">
    <input type="text" v-model="username">
    <input type="button" v-on:click="addthing" value="添加">
        <div v-for="(todo,index) in todos">
            <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(index)">
            {{index+1 }}.
            <span v-bind:class="{del:todo.done}">
            {{ todo.name }}</span>
        </div>
       总共{{todos.length}}个事项,完成{{todos.done}}个事项
</div>
</body>
</html>